.#{$prefix}-metro .navbar-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 20;
  margin-top: 20px; }

.#{$prefix}-metro  .navbar-wrapper .container {
  padding-left: 0;
  padding-right: 0; }

.#{$prefix}-metro  .navbar-wrapper .navbar {
  padding-left: 15px;
  padding-right: 15px; }

.#{$prefix}-metro  .navbar-content {
  width: 350px;
  padding: 15px;
  padding-bottom: 0px; }

.#{$prefix}-metro .navbar-content:before,
.#{$prefix}-metro navbar-content:after {
  display: table;
  content: "";
  line-height: 0; }

.#{$prefix}-metro .navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #fff;
  border-bottom-color: #fff; }

.#{$prefix}-metro .navbar-footer {
  background-color: #DDD; }

.#{$prefix}-metro .navbar-footer-content {
  padding: 10px 15px; }

.#{$prefix}os-header .navbar-nav > li > a {
  font-size: 20px;
  color: #fff;
  -webkit-text-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  text-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }

.#{$prefix}os-header .navbar-nav > .active > a {
  background-color: !important;
  color: #777 !important; }

.#{$prefix}os-header .navbar-nav > li > .dropdown-menu {
  margin-top: -1px;
  right: -1px;
  z-index: -1; }

.navbar-brand > a {
  padding-top: 15px;
  padding-bottom: 15px;
  text-decoration: none;
  color: #fff;
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.37);
  font-size: 20px; }

.#{$prefix}-metro {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.#{$prefix}-metro-dragging {
  z-index: 20; 
}

.#{$prefix}-metro-dragging .#{$prefix}-metro-tiles {
  z-index: 991; 
 }
 
 .#{$prefix}-metro-viewport{
     z-index: 20;
 }

.#{$prefix}-metro-container {
  width: 100%;
  position: relative;
  overflow-x: hidden; 
  overflow-y:auto;
   -webkit-overflow-scrolling: touch;  
}

.#{$prefix}-ie8 .#{$prefix}-metro-container {
  overflow: auto; }
  
.#{$prefix}os-brand{
     width:100%;
    float: none;
    padding: 10px;
    text-align: center;
    line-height: 27.5px;
}
    
.#{$prefix}os-brand img{    
    height: 22px;
    margin-top:-6px;
    margin-right: 10px;
    display:inline-block;
}
   
.#{$prefix}-metro-inner {
  position: relative;
  width:330;
  margin:0px auto;
  text-align: center;
}

.#{$prefix}os-header {
  background-color: transparent;
  border: none;
  z-index: 10;
  padding-right: 0px;
  padding-left: 0px;
  width:100%;
  margin-bottom : 0px;
  background-color: rgba($bgcolorR, $bgcolorG, $bgcolorB,0.5);;
}
@media screen and (min-width:680px) {
    .#{$prefix}-metro-inner {
      width:680px;
      margin:0px auto;
      text-align: left;
    }
    
    .#{$prefix}os-header{
        padding-right: 0px;
        padding-left: 0px;;
    }
    
    .#{$prefix}os-brand{
        width:380px;
        margin:0px auto;
    }
}

@media screen and (min-width: 1024px) {
   .#{$prefix}os-header {
      padding-right:50px;
      padding-top: 15px;
      background: none;
  }
   .#{$prefix}-metro-inner {
       margin-left: 50px; 
       width:auto;
       text-align: left;
    }
    .#{$prefix}os-brand{
        float: left;
        margin-left: 60px; 
        text-align: left;
    }
    
    .#{$prefix}os-brand img{    
        height: 30px;
        margin-top:-10px;
        margin-right: 10px;
    }
}
.#{$prefix}-ie8 .#{$prefix}os-header {
      padding-right:50px;
      padding-top: 15px;
      background: none;
  }
.#{$prefix}-ie8 .#{$prefix}-metro-inner {
   margin-left: 50px; 
   width:auto;
   text-align: left;
}
.#{$prefix}-ie8 .#{$prefix}os-brand{
    float: left;
    margin-left: 60px; 
    text-align: left;
}
    
.#{$prefix}-ie8 .#{$prefix}os-brand img{    
    height: 30px;
    margin-top:-10px;
    margin-right: 10px;
}
    
.navbar-brand > a {
  font-size: 24px; 
}

.#{$prefix}-metro-hook {
  height:40px !important;
}

.#{$prefix}-metro-hook-hover {
  background-color: rgba($bgcolorR,$bgcolorG,$bgcolorB,0.8) ;
}

.#{$prefix}-wallpaper {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: -100;
 }

.#{$prefix}-wallpaper-image {
  position:absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%; 
}

.#{$prefix}-wallpaper-image-back {
  position:absolute;
  display: none;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%; 
}

.tooltip-inner {
  color: $tipColor;
  text-decoration: none;
  background-color: $tipBgColor;
  border-radius: 0px; }

.tooltip.top .tooltip-arrow {
  border-top-color: $tipBgColor; }

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: $tipBgColor; }

.tooltip.right .tooltip-arrow {
  border-right-color: $tipBgColor; }
